<template>
  <div class="play-list">
    <div class="header">
      <h3>播放列表</h3>
      <el-button text @click="clearList">
        <el-icon><Delete /></el-icon>
        清空
      </el-button>
    </div>
    
    <div class="list">
      <div
        v-for="(song, index) in playlist"
        :key="song.cid"
        class="song-item"
        :class="{ active: currentSong?.cid === song.cid }"
        @click="playSong(song)"
      >
        <span class="index">{{ index + 1 }}</span>
        <div class="info">
          <div class="name">{{ song.name }}</div>
          <div class="artist">{{ song.artists.map(a => a.name).join('/') }}</div>
        </div>
        <el-button
          text
          class="delete-btn"
          @click.stop="removeSong(index)"
        >
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { usePlayerStore } from '@/stores/player'
import type { SongInfo } from '@/types'

const playerStore = usePlayerStore()
const { currentSong, playlist } = storeToRefs(playerStore)

const playSong = (song: SongInfo) => {
  playerStore.playSong(song)
}

const removeSong = (index: number) => {
  playerStore.removeSong(index)
}

const clearList = () => {
  playerStore.clearPlaylist()
}
</script>

<style lang="scss">
.play-list {
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  
  .header {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    
    h3 {
      margin: 0;
      font-size: 16px;
    }
  }
  
  .list {
    max-height: 400px;
    overflow-y: auto;
  }
  
  .song-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    
    &:hover {
      background: #f5f7fa;
      
      .delete-btn {
        opacity: 1;
      }
    }
    
    &.active {
      color: #409EFF;
    }
    
    .index {
      width: 24px;
      text-align: center;
    }
    
    .info {
      flex: 1;
      min-width: 0;
      
      .name {
        font-size: 14px;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .artist {
        font-size: 12px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .delete-btn {
      opacity: 0;
      transition: opacity 0.2s;
    }
  }
}
</style> 